<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="no-cache" http-equiv="Cache-control"/>
    <meta content="no-cache" http-equiv="Cache"/>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{static/main/img/favicon.png}" type="image/x-icon"/>

    <!-- title -->
    <title th:if="${systemTitle}" th:text="${systemTitle}"></title>
    <title th:text="'HZERO'" th:unless="${systemTitle}"></title>

    <!-- css -->
    <link rel="stylesheet" th:href="@{static/main/css/login-mobile.css}"/>

    <script th:src="@{static/main/js/jquery.min.js}"></script>
    <script th:src="@{static/main/js/mobile.js}"></script>
</head>
<body class="login">
<div class="logoleft">
    <div id="content">
        <div style="display: flex;justify-content: center">
            <img style="height: 48px;" th:src="@{static/main/img/logo.png}"/>
        </div>

        <div style="display: flex;justify-content: center;margin-top: 1.25rem;">
            <span style="font-size: 1.25rem;color: rgba(0,0,0,0.65);" th:if="${loginButton}"
                  th:text="${loginButton}"></span>
        </div>
        <form action="login" autocomplete="off" class="form-vertical login-form" method="post">
            <div class="control-group">
                <label class="control-label" th:if="${account}" th:text="${account}"></label>
                <div class="controls">
                    <div th:class="${usernameNotFound}? 'input-icon left inputError' : 'input-icon left inputNormal'">
                        <input autocomplete="off" class="m-wrap " id="username" name="username"
                               th:placeholder="${userNamePlaceholder}"
                               th:value="${param.username != null ? param.username[0] : ''}"
                               type="text"/>
                    </div>
                </div>

            </div>


            <div class="control-group" style="margin-top: 1.375rem">
                <label class="control-label " th:if="${passwordPlaceholder}" th:text="${passwordPlaceholder}"></label>
                <div class="controls">
                    <div th:class="${passwordWrong}? 'input-icon left inputError' : 'input-icon left inputNormal'">
                        <input autocomplete="off" class="m-wrap " id="password" th:placeholder="${passwordMessage}"
                               type="password"/>
                        <script type="text/javascript">
                            $('#password').on('focus', function () {
                                $(this).attr('type', 'password');
                            });
                        </script>
                    </div>
                </div>
            </div>
            <div class="alert alert-error" th:text="${loginErrorMsg}"></div>
            <!-- 是否开启验证码-->
            <div class="control-group" style="margin-top: 1.375rem" th:if="${isNeedCaptcha}">
                <label class="control-label " th:if="${captchaPlaceholder}" th:text="${captchaPlaceholder}">
                </label>
                <div class="controls">
                    <div class="input-icon left">
                        <i class="fa fa-refresh" onclick="changeImg()"
                           style="cursor: pointer; color: #999; float: right; position: static !important; border: 1px solid #ccc; height: 32px; line-height: 32px; padding: 0px 6px; margin: 0px; margin-left: 5px;"
                           title="${captchaRefresh}"></i>
                        <img id="imgObj" onclick="changeImg()"
                             src="public/captcha"
                             style="border: 1px solid #ccc;float: right;width: 40%;height: 2rem;"/>
                        <input class="m-wrap " name="captcha" style="width: 40%" th:placeholder="${captchaMessage}"
                               type="text"/>
                    </div>
                </div>
            </div>
            <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />-->
            <input id="md5_password" name="password" type="hidden"/>
            <div class="form-actions">
                <button class="btn" th:if="${loginButton}" th:text="${loginButton}" type="submit"></button>
            </div>

            <div style="clear:both"></div>
        </form>

    </div>
</div>

<div style="position:absolute;z-index:999;bottom:1.875rem;color: rgba(0,0,0,0.43);font-size: 0.75rem;width: 100%;text-align: center;">
    Copyright © The HZERO Author®.All rights reserved.
</div>
</body>
</html>